import React, { Component } from 'react';
import { Button, Modal, Input, Space } from "antd";
import GoBack from '@/components/TheGoBack'

import TheButton from "@/components/TheButton";
import TheTable from "@/components/TheTable";
import ThePagination from "@/components/ThePagination";
import { apiView, apiMarketingCutpriceRefPage } from '@/request/marketingTool'

const { Search } = Input;

export default class BargainView extends Component {
    constructor() {
        super()
        this.state = {
            columns_Goods: [
                {
                    title: "商品ID",
                    dataIndex: "goodsId",
                    key: "goodsId",
                },
                {
                    title: "主图",
                    dataIndex: "dataSkuImg",
                    key: "dataSkuImg",
                    render: (text, render) => {
                        return text ? <img src={text} style={{ width: 80, height: 80, margin: 'auto' }}></img> : '';
                    },
                },
                {
                    title: "商品名称",
                    dataIndex: "title",
                    key: "title",
                },

                {
                    title: "规格",
                    dataIndex: "skuJson",
                    key: "skuJson",
                    render: (text, render) => {
                        return text ? JSON.parse(text).skuAttribute.map(item => `${item.key}:${item.value}`).join("，") : '';
                    },
                },
                {
                    title: "物料ID",
                    dataIndex: "materialId",
                    key: "materialId",
                },
                {
                    title: "商品原价",
                    dataIndex: "cutPrice",
                    key: "cutPrice",
                    render: (text, render) => {
                        return <React.$Price price={render.cutPrice} />
                    },

                },
                {
                    title: "所属类目",
                    dataIndex: "goodsClassifyName",
                    key: "goodsClassifyName",
                },
                {
                    title: "商品品牌",
                    dataIndex: "brandName",
                    key: "brandName",
                },

                {
                    title: "砍价模式",
                    dataIndex: "cutMode",
                    key: "activityName",
                    render: (text, render) => {
                        return text == 0 ? '无需砍到底价即可购买' : '砍到底价才可购买';
                    },
                },
                {
                    title: "砍价最低价",
                    dataIndex: "cutPriceLow",
                    key: "cutPriceLow",
                    render: (text, render) => {
                        return <React.$Price price={render.cutPriceLow} />
                    },
                },

                {
                    title: "活动有效期",
                    dataIndex: "activityName",
                    key: "activityName",
                    render: (text, render) => {
                        return `${render.startTime} 至 ${render.endTime}`;
                    },
                },
                {
                    title: "砍价库存",
                    dataIndex: "originStock",
                    key: "originStock",
                    render: (text, render) => {
                        return text == -1 ? '不限制' : text;
                    },
                },
                {
                    title: "当前库存",
                    dataIndex: "stock",
                    key: "stock",
                    render: (text, render) => {
                        return text == -1 ? '不限制' : text;
                    },
                },
                {
                    title: "帮砍模式",
                    dataIndex: "cutPriceType",
                    key: "cutPriceType",
                    render: (text, render) => {
                        return text == 0 ? '随机金额' : '固定金额';
                    },
                },
                {
                    title: "帮砍人数",
                    dataIndex: "userNum",
                    key: "userNum",
                },
                // {
                //     title: "固定金额",
                //     dataIndex: "activityName",
                //     key: "activityName",
                // },
                {
                    title: "每人限购",
                    dataIndex: "userBuyLimit",
                    key: "userBuyLimit",
                    render: (text, render) => {
                        return text == -1 ? '不限制' : text;
                    },
                },

            ],
            dataSource_Goods: [],
            columns_User: [
                {
                    title: "砍价编号",
                    dataIndex: "id",
                    key: "id",
                },
                {
                    title: "用户昵称",
                    dataIndex: "nickName",
                    key: "nickName",
                },
                {
                    title: "注册手机号",
                    dataIndex: "memberMobile",
                    key: "memberMobile",
                },
                {
                    title: "注册时间",
                    dataIndex: "memberCreatedTime",
                    key: "memberCreatedTime",
                },
                {
                    title: "砍价状态",
                    dataIndex: "cutStatus",
                    key: "cutStatus",
                    render: (text, render) => {
                        let txt = ''
                        switch (text) {
                            case 1:
                                txt = '砍价中'
                                break;
                            case 2:
                                txt = '帮砍成功'
                                break;
                            case 3:
                                txt = '下单'
                                break;
                            case 4:
                                txt = '失败'
                                break;
                            case 5:
                                txt = '失效'
                                break;
                            default:
                                break;
                        }
                        return txt
                    },
                },

                {
                    title: "单价",
                    dataIndex: "cutCurrentPrice",
                    key: "cutCurrentPrice",
                    render: (text, render) => {
                        return <React.$Price price={render.cutCurrentPrice} />
                    }
                },
                // {
                //     title: "发起次数",
                //     dataIndex: "activityName",
                //     key: "activityName",
                // },
                {
                    title: "帮砍人数",
                    dataIndex: "helpCutNum",
                    key: "helpCutNum",
                    render: (text, render) => {
                        return <Button style={{'border':'none',"background":"none"}}><span onClick={() => this.props.history.push({ pathname: `/marketingTool/bargainHelpView/${render.cutId}/${render.id}` })}>{text}</span></Button>
                    }
                },
            ],
            dataSource_User: [],
            pageData: {
                pageNo: 1,
                pageSize: 10,
            },
            total: 0,
            id: '',
            currentSku: {}
        }
    }
    componentDidMount() {
        this.setState({
            id: this.props.match.params.id
        }, () => {
            if (this.state.id !== 'null') {
                this.getData(this.state.id)
                this.getUserPage(this.state.id)
            }
        })
    }
    async getUserPage(cutId) {
        let { pageSize, pageNo } = this.state.pageData
        let res = await apiMarketingCutpriceRefPage({
            pageNo,
            pageSize,
            cutId:this.state.id
        })
        if (res.code == 0) {
            this.setState({
                dataSource_User: res.data,
                total: res.totalCount
            })

        }
    }
    getData(id) {
        apiView({ id }).then(res => {
            if (res.code === 0) {
                let dataSource_Goods = [{}]
                Object.keys(res.data).forEach(key => {
                    dataSource_Goods[0][key] = res.data[key]
                })
                this.setState({
                    dataSource_Goods
                })

            }
        })
    }

    pageChange = (pageNo, pageSize) => {
        this.setState({
            pageData: {
                pageNo,
                pageSize
            }
        }, () => this.getUserPage())
    }

    render() {
        const { columns_User, dataSource_User, dataSource_Goods, columns_Goods, pageData, total, } = this.state
        return (
            <div className="p-layout-box">
                <GoBack history={this.props.history} title="" />
                <div style={{ marginTop: 20 }}>
                    <strong >商品信息</strong>
                    <TheTable style={{ marginTop: 20 }} columns={columns_Goods} dataSource={dataSource_Goods} />
                </div>
                <div style={{ marginTop: 20 }}>
                    <strong >参与用户</strong>
                    <TheTable style={{ marginTop: 20 }}
                        scroll={{ x: "max-content", y: '35vh' }}
                        columns={columns_User}
                        dataSource={dataSource_User}
                    />
                    <ThePagination pageNo={pageData.pageNo} pageSize={pageData.pageSize} total={total} pageChange={this.pageChange} />
                </div>

            </div>
        );
    }
}
